<script setup lang="ts">
import type { number } from 'echarts';
import { getCurrentInstance, ref, computed, onMounted, onUnmounted } from 'vue'

const that = getCurrentInstance()

defineProps({
  data: Array,
})

const code = ref('DD8959 100 WAFC1');

const testData = [
  {
    order: 'S2410',
    finishedNum: 240,
    unfinishedNum: 5200,
    materials: '韩国吊标',
    materialsImg: '韩国吊标',
    packMethod: '混码',
    finishedTime: '2025-05-11',
    deadLine: '2025-05-12',
  },
  {
    order: 'S241001',
    finishedNum: 240,
    unfinishedNum: 1200,
    materials: '韩国吊标',
    packMethod: '混码',
    finishedTime: '2025-05-11',
    deadLine: '2025-05-12',
  },
  {
    order: 'S241002',
    finishedNum: 0,
    unfinishedNum: 2400,
    materials: '内销合格证',
    packMethod: '混码',
    finishedTime: '2025-05-11',
    deadLine: '2025-05-12',
  },
  {
    order: 'S241003',
    finishedNum: 0,
    unfinishedNum: 1600,
    materials: '墨西哥垫转印',
    packMethod: '混码',
    deadLine: '2025-05-12',
  },
  {
    order: 'S241003',
    finishedNum: 0,
    unfinishedNum: 1600,
    materials: '墨西哥垫转印',
    packMethod: '混码',
    deadLine: '2025-05-12',
  },
]

const currentPage = ref(0);
const itemsPerPage = 3;
const totalPages = computed(() => Math.ceil(testData.length / itemsPerPage));
const currentPageData = computed(() => {
  const start = currentPage.value * itemsPerPage;
  return testData.slice(start, start + itemsPerPage);
});

let timerId = null
const switchToPage = (idx: number) => {
  currentPage.value = idx;
}

const startAutoSwitch = () => {
  if (!timerId) {
    timerId = setInterval(() => {
      const nextPage = (currentPage.value + 1) % totalPages.value
      switchToPage(nextPage)
    }, 8000)
  }
}

const stopAutoSwitch = () => {
  if (timerId) {
    clearInterval(timerId)
    timerId = null
  }
}

// 鼠标悬停控制
const handleMouseEnter = () => {
  stopAutoSwitch()
}

const handleMouseLeave = () => {
  startAutoSwitch()
}

onMounted(() => {
  startAutoSwitch()
})

onUnmounted(() => {
  stopAutoSwitch()
})
</script>

<template>
  <div ref="main" id="main" style="width: 100%; position: absolute; height: 100%;">
    <span>鞋型: &nbsp</span><span> {{ code }} </span>
    <div id="table-div">
      <table id="table">
        <thead>
          <tr>
            <th>制令</th>
            <th>已缴</th>
            <th>未缴</th>
            <th>包装资料</th>
            <th>包装资料图</th>
            <th>装箱方式</th>
            <th>完成时间</th>
            <th>缴库截止日期</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="row in currentPageData" v-bind:key="row">
            <td>{{ row.order }}</td>
            <td>{{ row.finishedNum }}</td>
            <td>{{ row.unfinishedNum }}</td>
            <td>{{ row.materials }}</td>
            <td> <img :src="row.materialsImg" /> </td>
            <td> {{ row.packMethod }} </td>
            <td>{{ row.finishedTime ? row.finishedTime : '---' }}</td>
            <td>{{ row.deadLine }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="page-indicator">
      <span v-for="n in totalPages" :key="n" :class="{ active: currentPage === n - 1 }" class="page-dot"
        @click="switchToPage(n - 1)">
      </span>
    </div>
  </div>
</template>

<style scoped>
th {
  font-weight: bold;
  color: #3486da !important;
  font-size: 30px;
}

td {
  font-size: 24px;
  color: #ebffff;
}

#table-div {
  position: absolute;
  top: 30px;
  height: calc(88% - 30px);
  width: 100%;
}

#main {
  position: absolute;
  top: 4px !important;
}

#main>span {
  color: #ebffff;
  font-size: 24px;
  line-height: 30px;
}

table {
  border-left: 1px solid #4c84c1;
  border-top: 1px solid #4c84c1;
  border-collapse: collapse;
  min-width: 100%;
  text-align: center;
  table-layout: fixed;
  position: absolute;
  table-layout: fixed;

  th,
  td {
    border-right: 1px solid #4c84c1;
    border-bottom: 1px solid #4c84c1;
    padding: 0;
  }
}

tbody tr {
  height: 100px;
}

.page-indicator {
  position: absolute;
  bottom: 6px !important;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 11%;
  border-top: 1px solid rgba(28, 204, 255, 0.2);
  pointer-events: auto;
  backdrop-filter: blur(5px);
}

.page-dot {
  width: 12px;
  height: 12px;
  margin: 0 6px;
  border-radius: 50%;
  background-color: rgba(28, 204, 255, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 2px solid rgba(28, 204, 255, 0.3);
  box-shadow: 0 0 5px rgba(28, 204, 255, 0.2);
}

.page-dot:hover {
  background-color: rgba(28, 204, 255, 0.5);
  transform: scale(1.2);
  border-color: rgba(28, 204, 255, 0.5);
  box-shadow: 0 0 15px rgba(28, 204, 255, 0.3);
}

.page-dot.active {
  background-color: rgba(28, 204, 255, 1);
  transform: scale(1.5);
  box-shadow: 0 0 20px rgba(28, 204, 255, 0.7);
  border-color: rgba(28, 204, 255, 1);
}
</style>
